<script setup lang="ts">
import { ref } from 'vue';
import { getCurrentInstance, navigateBack, showToast } from '@tarojs/taro';
import { appEvents } from '/@/utils/events';
const params = getCurrentInstance().router?.params as {
  event: string;
};
/**
 * 签名的url数据
 */
const signUrl = ref('');
/**
 * 确认签名
 * @param canvas
 * @param data
 */
function confirm(canvas: any, data: any) {
  console.log('图片地址', canvas, data);
  if (data === '') {
    showToast({ title: '请填写签名!', icon: 'error' });
    return false;
  }
  signUrl.value = canvas.toDataURL('image/png');
  console.log(signUrl.value);
  appEvents.trigger(params.event, signUrl);

  navigateBack();
}

/**
 * 重置签名
 */
function clear() {
  signUrl.value = '';
}
</script>

<template>
  <view class="my-approve-sign app-page--1">
    <app-navbar title="手写签名" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="my-approve-sign__wrapper">
        <nut-signature
          :lineWidth="4"
          @confirm="confirm"
          @clear="clear"
          class="my-approve-sign__signature"
        ></nut-signature>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
@import './index.scss';
</style>
